<script setup lang="ts">
import Menu from '@/components/menu/index.vue'
import Main from '@/layouts/main/index.vue'
import Tag from '@/components/tab/index.vue'
import {useUserStore} from "@/pinia/useUser.ts";
import {useRoute, useRouter} from "vue-router";
import type SysPermission from "@/type/entity/sys-permission.ts";
import {onMounted, ref, watch} from "vue";
import type TabProp from "@/components/tab/type/TabProp.ts";
import {Message} from "@/hook/message/message.ts";

const userStore = useUserStore();
const router = useRouter()
const route = useRoute()
const datas = ref(new Array<TabProp>())
let current = ref<string>()

const tagOpen = (item: SysPermission) => {
  current.value = item.permissionCode
  const exist = datas.value.find(i => i.code === item.permissionCode)
  if (!exist) {
    datas.value.push({text: item.permissionName, code: item.permissionCode})
  }
}

const tagClose = (code: string) => {
  if (datas.value.length === 1) {
    Message.warning("最后一个tag，不可关闭")
    return
  }
  const index = datas.value.findIndex(i => i.code === code)
  if (index === -1) return
  const isCurrent = current.value === code
  datas.value.splice(index, 1)
  if (isCurrent) {
    // 优先跳转到左边的 tag，如果没有就跳右边的
    const next = datas.value[index - 1] || datas.value[index]
    if (next) {
      current.value = next.code
      router.push(next.code)
    } else {
      // 所有标签页都被关掉了，跳转到首页或一个默认页
      router.push('/')
    }
  }
}

const tagClick = (code: string) => {
  current.value = code
  router.push(code)
}

watch(() => route.fullPath, (newPath) => {
  current.value = newPath
})

onMounted(() => {
  if (datas.value.length === 0) {
    current.value = route.path
    datas.value.push({text: route.meta.title as string, code: route.path})
  }
})
</script>

<template>
  <div class="layouts">
    <!--侧边栏-->
    <aside class="aside">
      <div class="aside-top">
        <img class="avatar" :src="userStore.avatar" alt="#" @click="userStore.realName = userStore.realName + 1">
        <span>{{ userStore.realName }}</span>
      </div>
      <Menu :menus="userStore.permissions" @select="tagOpen"></Menu>
    </aside>

    <!--内容区-->
    <div class="content">
      <!--页签-->
      <div class="tab">
        <t-tab v-for="item in datas"
             interactive
             :text="item.text"
             :code="item.code"
             :active="current === item.code"
             @close="tagClose"
             @click="tagClick(item.code)" />
      </div>
      <!--主要内容区域-->
      <main class="main">
        <Main></Main>
      </main>
    </div>
  </div>
</template>

<style scoped>
/*整体布局骨架*/
.layouts {
  background: #F5F7FA;
  display: flex;
  flex-direction: row;
  height: 100%;
}

/*侧边栏*/
.aside {
  max-width: 250px;
  border-right: #E0E0E0 1px solid;
  padding: 10px 0 0 0;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/*侧边栏顶部*/
.aside-top {
  padding: 0 0 0 20px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px; /*头像和用户名间距*/
}

/*头像*/
.avatar {
  width: 55px;
  height: 55px;
  border-radius: 5px;
  object-fit: cover;
}

/*用户名*/
.aside-top span {
  max-width: 140px; /* 限制宽度 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 溢出显示省略号 */
  white-space: nowrap; /* 不换行 */
  display: inline-block; /* 或 block */
  line-height: 1;
}

.content {
  margin: 10px;
  padding-left: 10px;
  padding-right: 10px;
  flex: 1;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

.tab {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 5px;

  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: nowrap;
}

.tab > * {
  flex: 0 0 auto;
}

.main {
  border-radius: 1px;
  flex: 1;

  /*让该div里面的元素居中*/
  display: flex;
  flex-direction: column;
  align-items: center;

  overflow: auto;
}
</style>